<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./upload.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.4/jquery.js"></script> -->
    <script src="./upload.helper.js"></script>
    <script>
      // 上传助手初始化
      UploadHelper.init({
        objPlatform: 'OSS',
        signUrl: 'http://localhost:9999/comm/aliOssSign',
        fileNameFormat(fileName = '') {
          const dateStr = UploadHelper.dateStr();
          const randomStr = UploadHelper.randomStr(4);
          if (!fileName) {
            return `guangnian_${dateStr}${randomStr}`;
          }
          const extIndex = fileName.lastIndexOf('.');
          const ext =
            extIndex > -1 ? fileName.substring(extIndex, fileName.length) : '';
          return `guangnian_${dateStr}${randomStr}${ext}`;
        },
        request({ url, data, callback } = {}) {
          $.ajax({
            url: url,
            type: 'GET',
            data: data,
            dataType: 'json',
            contentType: 'application/json',
            processData: false,
            success: function (res) {
              if (res && res.code == 0) {
                callback(res.data);
              }
            },
            error: function () {
              callback();
            },
          });
        },
      });

      // UploadHelper.getUploadXhr({
      //   fileName: 'ssfs.jpg',
      //   callback: (res) => {
      //     console.log(res);
      //   },
      // });
    </script>
    <script src="./jQuery.upload.js"></script>
    <link rel="stylesheet" href="./viewer/viewer.min.css" />
    <script src="./viewer/viewer.min.js"></script>
  </head>
  <body>
    <div
      class="upload"
      id="case"
      name="case"
      mode="local"
      action="http://7d538740.cpolar.io/comm/upload"
      data-num="1"
      data-type="png,jpg,pdf,docx"
      data-size="1024000"
      data-value="https://img.guangniansz.com/guangnian_202209020008576bf3.png"
    ></div>
    <div
      class="upload"
      id="case2"
      name="case2"
      action="http://7d538740.cpolar.io/comm/upload"
      data-num="3"
      data-type="png,jpg,pdf,docx"
      data-size="1024000"
      item-width="500px"
      item-height="500px"
      data-value="https://img.guangniansz.com/guangnian_202202241124269850.pdf@R90,https://img.guangniansz.com/guangnian_202202242349252024.jpg,https://img.guangniansz.com/guangnian_202204061126495750.jpg"
    ></div>
    <div id="imgViewerContainer"></div>
  </body>
  <script>
    $('#case').upload(function (deta) {
      console.log(deta);
    });

    var $imgViewerContainer = document.getElementById('imgViewerContainer');
    var imgViewer = new Viewer($imgViewerContainer, {
      navbar: false,
      toolbar: false,
      rotatable: false,
    });
    $('#case2').upload(function (deta, url) {
      $imgViewerContainer.innerHTML = `<img src="${url}"  width="0" height="0" style="display: none;"></img>`;
      imgViewer.update();
      imgViewer.show();
    });
  </script>
</html>
